<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css"/>
		<script src="js/Fish.js"></script>
	</head>
	<body scroll="no">
		<div class="game" id="d2">
		<!--	<div class="box1">-->
				<div class="box" id="d1">
					<div class="jia" id="jia">
					</div>
					<div class="jian" id="jian"></div>
					<div class="cannon" id="cannon">
						
					</div>
					<img src="images/bullet1.png" class="bullet" id="bullet" />
					<div class="money1"></div>
					<div class="money2"></div>
					<div class="money3"></div>
					<div class="money4"></div>
					<div class="money5"></div>
					<div class="money6"></div>
				</div>
		 <!--   </div>-->
		</div>
		<script>
		var d1 = document.getElementById("d1");
		var ww = document.documentElement.clientWidth || document.body.clientWidth;
		var hh = document.documentElement.clientHeight || document.body.clientWidth;
		d1.style.left = ww/2 - 765/2 +"px";
		
		var jia = document.getElementById("jia");
		var jian = document.getElementById("jian");
		var cannon = document.getElementById("cannon");
		var pic = ["images/cannon1.png","images/cannon2.png","images/cannon3.png","images/cannon4.png","images/cannon5.png","images/cannon6.png","images/cannon7.png"];
		var account = 0;
		jia.onclick = function(){
			account++;
			if(account>pic.length) account=0;
			cannon.style.backgroundImage = "url("+pic[account]+")";
			if(account>=6){
				cannon.style.backgroundImage = "url("+pic[6]+")";
			}
		}
		jian.onclick = function(){
			account--;
			if(account>pic.length) account=0;
			cannon.style.backgroundImage = "url("+pic[account]+")";
			if(account<0){
				cannon.style.backgroundImage = "url("+pic[0]+")";
			}
		}
		
		
		
		
		
		
		var fishs = [];                     
//		window.onload = function(){
			function createFish(){
				for(var i=1;i<30;i++){
					var f = new Fish(-i*50-50, Math.random()*600,55,296,"images/fish1.png",8,15);
					fishs.push(f);
				}
			}
			createFish();
			var i = 0;
			var timer = setInterval(function(){
				i++;
				if(i == 0) i=0;
				drawFish();
			},100/60);
			function drawFish(){
				for(var j=0;j<fishs.length;j++){
					var f = fishs[j];
					if(i%f.time == 0){
						f.bgy = f.bgy - parseInt(f.s.height);
						if(f.bgy==-parseInt(f.s.height)*f.count/2) f.bgy=0;
						f.s.background = "url("+f.bgimg+") 0px "+f.bgy+"px";
						f.s.left = parseInt(f.s.left) + 5 + "px";
					}
					
					var x = parseInt(f.s.left) + "px";
					var y = parseInt(f.s.top) + "px";
					
					if(x>ww+f.width){
						fishs.splice(fishs.indexOf(f),1);
						console.log(fishs);
						document.body.removeChild(f.e);
						delete f;
					}
					if(fishs.length == 15){
						createFish();
					}
				}
			}
		
        cannon.style.left = ww/2 - 765/2 + 90 +"px";
        
        

		document.onclick = function(e){
			console.log(e.target);
			if(e.target==jia||e.target==jian){
				return;
			}
			var x = e.pageX;
			var y = e.pageY;
			var a = x-parseInt(cannon.style.left);
			var b = hh - y;
			var deg = Math.atan(a/b)*180/Math.PI;
			cannon.style.transform = "rotate("+deg+"deg)";
			
			
			var bullet = document.getElementById("bullet");
			var bullet = document.createElement("img");
			bullet.src = "images/bullet1.png";
			bullet.style.position = "absolute";
			bullet.style.left = "730" + "px";
			bullet.style.bottom = "630" + "px";
			document.body.appendChild(bullet);
			
			var x1 = parseInt(bullet.style.left);
			var c = x - x1;
			var d = hh - y;
			console.log(d);
			var deg1 = Math.atan(c/d)*180/Math.PI;
			bullet.style.transform = "rotate("+deg1+"deg)";
			var rate = c/d;
			var d1 = 0;
			bullet.style.display = "block";
			
			var timer1 = setInterval(function(){
				d1 = d1 + 10;
				var c1 = d1*rate;
				c1 = c1 + x1;
				bullet.style.left = c1;
				bullet.style.bottom = d1;
				if(parseInt(bullet.style.bottom)>=1000){
					clearInterval(timer1);
					document.body.removeChild(bullet);
				}
			},100);
			
			zhayu();
		};
		
		function zhayu(){
			
		}
		</script>
	</body>
</html>
